import React from "react";
import { useState } from "react";
import "./Slider.css";

export default function Slider() {
  //图片数组
  let images = [
    "/images/1.jpg",
    "/images/2.jpg",
    "/images/3.jpg",
    "/images/4.jpg",
    "/images/5.jpg",
  ];

  //声明一个状态数据
  let [key, setKey] = useState(0);

  //声明 next 函数
  let next = () => {
    //先自增
    key = key + 1;
    //判断 key 值
    if(key > 4){
      key = 0;
    }
    //
    setKey(key);
  };

  //声明 prev 函数
  let prev = () => {
    //先自增
    key = key - 1;
    //判断 key 值
    if(key < 0){
      key = 4;
    }
    //
    setKey(key);
  };

  return (
    <div className="slider">
      <div className="img-wrapper" style={{ left: -key * 640 + "px" }}>
        {images.map((item, index) => {
          return <img key={index} src={item} alt="" />;
        })}
      </div>

      <div className="prev btn" onClick={prev}>&lt;</div>
      <div className="next btn" onClick={next}>
        &gt;
      </div>
    </div>
  );
  
}

